<template>
	<view class="full box relative p-safe">
		<scroll-view class="full" scroll-y>

			<div class="html-content">
				<u-parse :content="html" />
			</div>
			<u-parse :content="content"></u-parse>
			<!-- <div class="type-table">
				<div class="table-header">
					<text class="header-item">房型</text>
					<text class="header-item">数量</text>
					<text class="header-item">价格</text>
				</div>
				<div class="table-row-item" v-for="(item,index) in typeList" :key="index">
					<text class="col-item">23333333333333333333333333333{{ item.name }}</text>
					<text class="col-item">{{ item.number }}</text>
					<text class="col-item">￥{{ item.price }}</text>
				</div>
			</div> -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad(ev) {
			const { id } = ev
			this.initData(id)
			this.id = id
		},
		methods: {
			async initData(id) {
				const resp = await this.$request({
					url: "/Hotel/detailHotel",
					data: { id },
				})
				const { hotel_name, hotel_type, content } = resp.data
				uni.setNavigationBarTitle({
					title: hotel_name || "酒店详情"
				})
				this.typeList = hotel_type || []
				this.html = content
				this.content = this.createTableHtml(hotel_type || [])
			},
			createTableHtml(list) {
				let trHtml = ""
				list.forEach(item => {
					const { name, number, price } = item
					trHtml +=
						`<tr><td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 12rpx 26rpx;word-break: break-all;line-height: 36rpx;">${name}</td>
					<td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 12rpx 16rpx;word-break: break-all;line-height: 36rpx;">${number}</td>
					<td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 12rpx 26rpx;word-break: break-all;line-height: 36rpx;">￥${price}</td></tr>`
				})
				return `<table style="color:#666;border:1px solid #d6d6d6;border-collapse: collapse;width:650rpx;margin:0 auto;">
				<tbody>
					<tr>
						<td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 16rpx 20rpx;width:40%;">房型</td>
						<td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 16rpx 20rpx;width:20%;">数量</td>
						<td style="border: 1px solid #d6d6d6;font-size: 24rpx;padding: 16rpx 20rpx;width:40%;">价格</td>
					</tr>` + trHtml + `</tbody></table>`
			},
		},
		computed: {},
		data() {
			return {
				html: "",
				content: "",
				typeList: [],
			}
		}
	}
</script>

<style lang="scss" scoped>
	table {
		tr {
			td {}
		}
	}

	.type-table {
		position: relative;
		box-sizing: border-box;
		width: 640rpx;
		margin: 32rpx auto;
		--table-border-color: #666;
		border: 1rpx solid var(--table-border-color);
		font-size: 24rpx;
		color: #666;
		border-bottom: 0;

		.table-row-item {
			display: flex;
			align-items: center;
			flex-flow: row nowrap;
			height: fit-content;
			height: 40px;


			.col-item {
				display: flex;
				align-items: center;
				justify-content: center;
				word-break: break-all;
				width: 30%;
				padding: 16rpx 24rpx;
				box-sizing: border-box;
				border-right: 1rpx solid var(--table-border-color);
				border-bottom: 1rpx solid var(--table-border-color);

				&:first-child {
					width: 40%;
				}

				&:last-child {
					border-right: 0;
				}
			}
		}

		.table-header {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid var(--table-border-color);

			.header-item {
				width: 30%;
				padding: 16rpx 24rpx;
				box-sizing: border-box;
				border-right: 1rpx solid var(--table-border-color);

				&:first-child {
					width: 40%;
				}

				&:last-child {
					border-right: 0;
				}
			}
		}


	}

	.html-content {
		background-color: #FFF;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.6);
		line-height: 44rpx;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
	}
</style>